<template>

  <div class="promotion">
    <mt-header fixed title="推广记录">
      <router-link to="/promotion" slot="left"><mt-button icon="back"></mt-button></router-link>
    </mt-header>
    <div class="search">
      <mt-search v-model="keyword" cancel-text="" placeholder="请输入用户名">
      </mt-search>
    </div>
    <div class="cont">
       <div class="top">
         <div class="title">排序方式：</div>
         <div class="tab">
           <div class="tab-list" v-for="(item,index) in tabList"
            :key="index"
            :class="{act:current==index}"
            @click="changeAct(index)"
            >
             {{item.name}}
           </div>
         </div>
       </div>
       <div class="cont-list">
          <div class="item">
              <div class="item-lt">
                 <div class="info">
                   191****7887/崔*萍
                 </div>
                 <div class="grade">
                   普通用户
                 </div>
              </div>
              <div class="item-rt">
                  <div class="tel">
                    推荐人：155****3601
                  </div>
                  <div class="time">
                    2024-06-06 16:38:54
                  </div>
              </div>
          </div>
          <div class="item">
              <div class="item-lt">
                 <div class="info">
                   191****7887/崔*萍
                 </div>
                 <div class="grade">
                   普通用户
                 </div>
              </div>
              <div class="item-rt">
                  <div class="tel">
                    推荐人：155****3601
                  </div>
                  <div class="time">
                    2024-06-06 16:38:54
                  </div>
              </div>
          </div>
          <div class="item">
              <div class="item-lt">
                 <div class="info">
                   191****7887/崔*萍
                 </div>
                 <div class="grade">
                   普通用户
                 </div>
              </div>
              <div class="item-rt">
                  <div class="tel">
                    推荐人：155****3601
                  </div>
                  <div class="time">
                    2024-06-06 16:38:54
                  </div>
              </div>
          </div>
          <div class="item">
              <div class="item-lt">
                 <div class="info">
                   191****7887/崔*萍
                 </div>
                 <div class="grade">
                   普通用户
                 </div>
              </div>
              <div class="item-rt">
                  <div class="tel">
                    推荐人：155****3601
                  </div>
                  <div class="time">
                    2024-06-06 16:38:54
                  </div>
              </div>
          </div>
          <div class="item">
              <div class="item-lt">
                 <div class="info">
                   191****7887/崔*萍
                 </div>
                 <div class="grade">
                   普通用户
                 </div>
              </div>
              <div class="item-rt">
                  <div class="tel">
                    推荐人：155****3601
                  </div>
                  <div class="time">
                    2024-06-06 16:38:54
                  </div>
              </div>
          </div>
       </div>
    </div>
  </div>
</template>

<script>
  export default {

    name: 'promotionRecord',
    data() {
      return {
        keyword: "",
        current:0,
        tabList:[{
         id:1,
          name:'按等级'
        },{
          id:1,
           name:'按时间'
        }]
      };
    },

    created: function() {},
    watch: {

    },
    mounted() {

    },
    methods: {
      changeAct(index){
         this.current = index;
      }

    }

  };
</script>

<style scoped>
.cont-list .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E9E9E9;
  padding: .3rem;
}
.item-lt .info{
  color: #333;
  font-size: 30px;
  font-weight: 600;
}
.item-lt .grade{
  color: #333;
  font-size:30px;
  font-weight: 600;
}
.item-rt .tel{
  color: #333;
  font-size:24px;
  font-weight: 600;
}
.item-rt .time{
  color: #333;
  font-size: 24px;
  font-weight: 600;
}
 .promotion {
    width: 100%;
    min-height: 100vh;
    background-color: #F7F7F7;
  }

  .mint-header {
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid #F1F1F1;
  }
  .mint-search{
   height: 1.5rem;
   background-color: transparent;

  }
   /deep/ .mint-searchbar-inner{
     padding: .2rem .3rem;
      border-radius: .5rem;
   }
   /deep/ .mint-searchbar{

     background-color: #F7F7F7;
  }
  /deep/ .mint-searchbar input{
    padding-left: .5rem !important;
    background-color: #fff;
  }
  .search {
   padding: 1.5rem 0 .2rem 0;

  }

  .tips-text {
    display: flex;
    justify-content: center;
    color: #d52612;
    font-size:31px;
    padding-top: 2rem;
  }
  .top{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
.cont{
  background-color: #fff;
}
  .cont .top{
    padding: .1rem .3rem;
  }
 .top .title{
    color: #A9A9A9;
    font-size:26px;
  }
  .tab{
 display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .tab .tab-list{
    color: #A9A9A9;
    font-size:26px;
    padding-left: .5rem;
  }
    .tab .tab-list.act{
      color: #D62A2A;
    }
</style>
